<template>
	<div style="text-align: left;color: black;">
		<div style="width: 100%;height: 100%;">
			<div class="content-top">
				<van-image @click="headClickHandler" style="margin: 1vw;" width="10vw" height="10vw" fit="cover" :src="headImg" round />
				<strong style="margin: 3vw;">{{userName}}</strong>
			</div>
			<div style="padding:1vh 0;">
				{{data.context}}
			</div>
			<div>
				<div>
					<van-row v-for="(row, key) in imgShowList" :key="key">
						<van-col span="8" v-for="(pic, rowKey) in row" :key="rowKey">
							<van-image width="90%" height="28vw" fit="cover" position="left" lazy-load :src="pic"
								@click="showImageView(key*3+rowKey)" />
						</van-col>
					</van-row>
				</div>
			</div>
			<div style="text-align: right;font-size: 0.1rem;color: gray;">
				{{pubTime}}
			</div>
		</div>
		<div>
			<div style="width: 100%;">
				<van-row>
					<van-col span="6">
						<div style="font-size: 12px;color: gray;">
							热度 {{data.thumbsUpNum+data.commentNum}}
						</div>
					</van-col>
					<van-col span="3" offset="15" style="font-size: 23px;">
						<van-icon @click="thumbsUp" v-show="!thumbUped" name="good-job-o" />
						<van-icon @click="thumbsUp" style="color: blue;" v-show="thumbUped" name="good-job" />
					</van-col>
					<!-- <van-col span="3"><van-icon style="font-size: 23px;" name="share-o" /></van-col> -->
				</van-row>
			</div>
			<ThumbsUpList :userList="data.thumbsUpUserList" ref="thumbUp"></ThumbsUpList>
			<div>
				<ul>
					<li v-for="comment in commentList" :key="comment.id">
						<AComment :userName="comment.user.userName" :context="comment.context" :userId="comment.id">
						</AComment>
					</li>
				</ul>
			</div>
		</div>

		<van-search v-model="commentText" @search="sendComment" placeholder="评论" left-icon="chat-o" />
	</div>

</template>

<script>
	import AComment from './AComment.vue';
	import ThumbsUpList from './ThumbsUpList.vue';
	import url from '@/assets/url.json';
	import {
		showNotify,
		showImagePreview
	} from 'vant';

	export default {
		name: 'BlogWithComment',
		components: {
			AComment,
			ThumbsUpList
		},
		props: {
			data: Object,
			clickHead: Function
		},
		mounted() {
			this.transImgSrc();
			this.setThumbUpStatu();
			this.pubTime=this.setTime(this.data.publishTime);
			this.setCommentList(this.data.commentBlogList);
		},
		data() {
			return {
				commentText: '',
				headImg: '',
				userName: '',
				thumbUped: false,
				imgList: [],
				imgShowList: [
					[]
				],
				pubTime: '',
				commentList:[]
			}
		},
		methods: {
			headClickHandler(){
				if(!((typeof this.clickHead)==='undefined')){
					this.clickHead(this.data.uid);
				}
			},
			setCommentList(list){
				for(let key in list){
					this.commentList.push(list[key]);
				}
			},
			sendComment(value){
				this.$axios({
					url:url.ip+'/api-blog'+'/comment/publish',
					method:'GET',
					params:{
						bid:this.data.id,
						context: value,
					},
					headers:{
						token: this.$cookies.get('token'),
					}
				}).then((res) => {
					if (res.data.code !== 0) {
						console.log(res);
						showNotify({
							type: 'danger',
							message: res.data.message
						});
					} else {
						this.commentList.push({
							context:this.commentText,
							user:{
								userName:res.data.data.userName
							}
						})
						showNotify({
							type: 'success',
							message: '发送评论成功'
						});
						this.commentText='';
					}
				}).catch((err) => {
					console.log(err);
					showNotify({
						type: 'danger',
						message: "网络错误或用户未登录"
					});
				})
			},
			
			setTime(t) {
				Date.prototype.pattern = function(fmt) {
					var o = {
						"M+": this.getMonth() + 1, //月份         
						"d+": this.getDate(), //日         
						"h+": this.getHours() % 12 == 0 ? 12 : this.getHours() % 12, //小时         
						"H+": this.getHours(), //小时         
						"m+": this.getMinutes(), //分         
						"s+": this.getSeconds(), //秒         
						"q+": Math.floor((this.getMonth() + 3) / 3), //季度         
						"S": this.getMilliseconds() //毫秒         
					};
					var week = {
						"0": "/u65e5",
						"1": "/u4e00",
						"2": "/u4e8c",
						"3": "/u4e09",
						"4": "/u56db",
						"5": "/u4e94",
						"6": "/u516d"
					};
					if (/(y+)/.test(fmt)) {
						fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
					}
					if (/(E+)/.test(fmt)) {
						fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? "/u661f/u671f" :
							"/u5468") : "") + week[this.getDay() + ""]);
					}
					for (var k in o) {
						if (new RegExp("(" + k + ")").test(fmt)) {
							fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" +
								o[k]).length)));
						}
					}
					return fmt;
				}
				var date = new Date(t);
				return date.pattern("yyyy-MM-dd hh:mm:ss");
			},
			transImgSrc() {
				if (this.data.user === null) {
					return;
				}
				this.headImg = url.ip + '/' + this.data.user.headImgSrc;
				this.userName = this.data.user.userName;
				if (this.data.imgSrc === null) {
					return;
				}
				if (this.data.imgSrc === '') {
					return;
				}
				this.imgList = this.data.imgSrc.split(';');
				this.imgList.pop();
				for (let key in this.imgList) {
					if (this.imgList[key] !== '') {
						this.imgList[key] = url.ip + '/' + this.imgList[key];
					}
				}
				let tCount = 0;
				let nowRow = 0;
				for (let key in this.imgList) {
					if (tCount >= 3) {
						this.imgShowList.push([]);
						nowRow++;
					}
					if (this.imgList[key] !== '') {
						this.imgShowList[nowRow].push(this.imgList[key]);
						tCount++;
					}
				}
			},

			thumbsUp() {
				this.$axios({
					url: url.ip + '/api-blog' + '/comment/thumb_up',
					method: 'GET',
					params: {
						bid: this.data.id
					},
					headers: {
						token: this.$cookies.get('token'),
					}
				}).then((res) => {
					if (res.data.code !== 0) {
						console.log(res);
						showNotify({
							type: 'danger',
							message: res.data.message
						});
					} else {
						showNotify({
							type: 'success',
							message: res.data.message
						});
						this.thumbUped = !this.thumbUped;
					}
				}).catch((err) => {
					showNotify({
						type: 'danger',
						message: err
					});
				})
			},
			showImageView(position) {
				showImagePreview({
					images: this.imgList,
					startPosition: position,
				});
			},
			setThumbUpStatu() {
				for (let key in this.data.thumbsUpUserList) {
					let i = this.data.thumbsUpUserList[key];
					if (i.id === this.$cookies.get('userId')) {
						this.thumbUped = true;
					}
				}

			}
		}
	}
</script>

<style>
	.content-top {
		width: 100%;
		height: 20%;
		display: flex;
	}

	.content {
		padding: 1vh;
	}
</style>